<template>
  <DynamicTable
    header-title="班级列表"
    :data-request="Api.manageClass.classFindAll"
    :columns="columns"
    @load="onTableDataLoaded"
  >
    <template #toolbar>
      <a-button
        :icon="h(PlusOutlined)"
        :disabled="!$auth('manage:class:create')"
        @click="openClassModal({})"
      >
        新增
      </a-button>
      <a-button
        :icon="h(ExportOutlined)"
        @click="exportClass"
      >
        导出数据
      </a-button>
    </template>
  </DynamicTable>
    <!-- 添加计划配置弹窗 -->
    <PlanConfigModal
    v-model:visible="planConfigVisible"
    :classData="currentClassData"
    @confirm="handlePlanConfirm"
  />
</template>

<script lang="tsx" setup>
  import { h, ref, toRaw } from 'vue';
  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { message, Tag } from 'ant-design-vue';
  import type { TableColumn } from '@/components/core/dynamic-table';
  import { Api } from '@/api/';
  import { useTable } from '@/components/core/dynamic-table';
  import { useFormModal } from '@/hooks/useModal/';
  import type { ActionItem, TableActionType, CustomRenderParams } from '@/components/core/dynamic-table';
  import { ClassStatus } from '@/enums/class';
  import { useRouter } from 'vue-router';
  import PlanConfigModal from './PlanConfigModal.vue'; // 导入计划配置弹窗组件
  import { request } from '@/utils/request'; // 导入request函数

  const router = useRouter();

  const planConfigVisible = ref(false);
  const currentClassData = ref({});
  // 打开计划配置弹窗
  const setPlan = (record) => {
    console.log('正在配置计划的班级ID:', record.classId);
    currentClassData.value = record;
    planConfigVisible.value = true;
  };

  // 处理计划确认
  const handlePlanConfirm = async (data) => {
    try {
      console.log('计划配置数据:', data);
      // 获取传入的数据
      const { classId, studyPlan } = data;
      
      // 如果没有有效计划项，弹出提示
      if (!studyPlan || studyPlan.length === 0) {
        message.warning('请至少添加一个有效的计划项');
        return;
      }
      
      // 移除额外的客户端验证，表单组件已经进行验证
      
      // 根据API要求构造请求参数
      const plans = studyPlan.map(plan => {
        // 构造计划项，打卡开始时间为可选项
        const planItem = {
          classId: classId,                       // 班级ID
          planName: plan.mainPlanName,            // 主计划名称
          subPlans: plan.subPlanName,             // 子计划名称作为单个子计划
          mark: ''                                // 计划备注，默认为空
        };
        
        // 如果提供了打卡开始时间，则添加到计划项中
        if (plan.startTime) {
          planItem.punchStartAt = plan.startTime;
        }
        
        return planItem;
      });
      
      // 构建符合API规范的请求参数
      const requestParams = {
        plans: plans
      };
      
      // 构建请求URL - 使用正确的API端点
      const requestUrl = '/api/admin/study/plan/main-plan';
      
      // 打印请求信息
      console.log('==================================================');
      console.log('请求URL:', requestUrl);
      console.log('请求参数:', JSON.stringify(requestParams, null, 2));
      console.log('==================================================');
      
      // 调用API保存计划配置
      const result = await request(requestUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        data: requestParams
      });
      
      console.log('保存计划配置成功，返回结果:', result);
      message.success('计划配置保存成功');
      dynamicTableInstance.reload(); // 重新加载表格数据
      planConfigVisible.value = false; // 关闭弹窗
    } catch (error) {
      console.error('保存计划配置失败', error);
      message.error('保存计划配置失败，请重试');
    }
  };


console.log("所有注册的路由：", router.getRoutes()); // 查看所有注册的路由及其名称

  defineOptions({
    name: 'ManageClass',
  });

  function generateClassIdPrefix() {
  const year = new Date().getFullYear();
  return `CLS${year}`;
}
async function getTeacherNameById(teacherId: number){
  const teacherData = await Api.systemUser.userRead({id: teacherId});
  console.log("getTeacherNameById", teacherData)
  return teacherData.nickname || '未知教师';
}

function generateNextClassId(prev: string) {
  const currentYear = new Date().getFullYear();
  const prefix = `CLS${currentYear}`;
  const num = prev.startsWith(prefix) 
    ? parseInt(prev.slice(prefix.length), 10) 
    : 0;
  return prefix + String(num + 1).padStart(6, '0');
}


  // 定义类型
  export interface TableListItem {
    id: number;
    classId: string;
    className: string;
    classGrade: number;
    classTeacher: number;
    teacherName?: string;
    startAt: string;
    expireAt: string;
    status: ClassStatus;
    createdAt: string;
    updatedAt: string;
  }

  export type TableColumnItem = TableColumn;

  const [DynamicTable, dynamicTableInstance] = useTable({
    pagination: {
      defaultPageSize: 10,
      showSizeChanger: true,
    },
    size: 'small',
    rowKey: 'id',
    bordered: true,
  });

  const [showModal] = useFormModal();

  // 导出班级数据
  const exportClass = async () => {
    message.info('导出班级数据功能开发中');
  };

// 假设这是当前班级的最大 ID
let currentMaxId = ref(0); // 使用 ref 以便响应式更新

// 获取最大班级 ID 的函数
const getMaxClassId = async (): Promise<string> => {
  try {
    const response = await Api.manageClass.classFindAll({});
    if (!response || !response.items || response.items.length === 0) {
      return 'CLS2023000000'; // 默认值
    }
    const classIds = response.items.map(item => item.classId);
    return classIds.reduce((max, current) => {
      return current > max ? current : max;
    }, 'CLS2023000000');
  } catch (error) {
    console.error('获取班级列表失败', error);
    return 'CLS2023000000'; // 出错时返回默认值
  }
};

  const openClassModal = async (record: Partial<TableListItem>) => {
    let classId = '';
    let selectedStudentIds = []; // 用于存储已选学生ID列表
    
    try {
      if (!record.id) {
        // 生成新的班级ID
        const maxClassId = await getMaxClassId();
        classId = generateNextClassId(maxClassId);
        console.log("生成新的班级ID是", classId);
      } else {
        classId = record.classId || '';
        console.log("编辑的班级ID是", classId);
        
        // 在编辑模式下，获取班级详细信息，包括学生列表
        try {
          // 调用API获取班级详情
          // API文档中显示应该使用班级的classId来获取详情
          // 根据接口文档，路径应该是/api/admin/manage/class/{id}，其中id是班级的classId
          const classDetail = await Api.manageClass.classFindOne({ id: record.classId });
          console.log("获取到的班级详情:", classDetail);
          
          // 从班级详情中提取学生ID列表
          if (classDetail && classDetail.students && Array.isArray(classDetail.students)) {
            selectedStudentIds = classDetail.students.map(student => student.id);
            console.log("已选学生ID列表:", selectedStudentIds);
          }
        } catch (error) {
          console.error("获取班级详情失败:", error);
          message.error("获取班级详情失败，可能无法显示已有学生信息");
        }
      }
    } catch (error) {
      console.error('生成班级ID出错', error);
      message.error('生成班级ID出错，请重试');
    }
    
    const [formRef] = await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}班级`,
        width: 700,
        onFinish: async (values) => {
          if (record.id) {
            console.log('编辑班级 - 发送给后端的数据:', { id: record.classId, ...toRaw(values) });
            // 确保使用classId作为更新的ID参数
            await Api.manageClass.classUpdate({ id: record.classId }, toRaw(values));
          } else {
            // 生成新的班级 ID
            values.classId = generateNextClassId(classId);
            console.log('新增班级 - 发送给后端的数据:', toRaw(values));
            await Api.manageClass.classCreate(values);
          }
          dynamicTableInstance.reload();
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: [
        {
          field: 'classId',
          component: 'Input', // 使用支持的组件类型
          label: '班级ID',
          componentProps: {
            disabled: true, // 只读模式
            defaultValue: classId,
          },
        },
          {
            field: 'className',
            component: 'Input',
            label: '班级名称',
            colProps: {
              span: 12,
            },
            rules: [{ required: true, type: 'string' }],
          },
          {
            field: 'classGrade',
            component: 'InputNumber',
            label: '班级学级',
            colProps: {
              span: 12,
            },
            componentProps: {
              min: 0,
              max: 8,
              placeholder: '0:幼儿园, 1-6:小学, 7-8:初中',
            },
            rules: [{ required: true, type: 'number' }],
          },
          //这边是新建班级的时候，需要选择带班老师
          {
          field: 'classTeacher',
          component: 'Select',
          label: '带班老师',
          required: true,
          componentProps: {
            request: async () => {
              // 获取完整的用户列表
              const result = await Api.systemUser.userList({});
              
              // 筛选条件：1. 角色包含带班老师(roleId=2) 2. 状态为启用(status=1)
              const teacherList = result.items.filter(user => {
                const isTeacher = user.roles.some(role => role.id === 2); // 角色ID为2的是带班老师
                const isActive = user.status === 1; // 状态为1表示启用
                return isTeacher && isActive;
              });
              
              // 处理并返回适当格式的数据，使用真实ID和教师姓名
              const data = teacherList.map(teacher => ({
                label: `${teacher.id}-${teacher.nickname}`, // ID-姓名格式显示
                value: teacher.id // 使用真实的用户ID
              }));
              
              console.log("带班老师列表数据:", data);
              return data;
            },
            showSearch: true,
            // 使用函数定义筛选逻辑
            filterOption: (input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
            // 指定过滤属性
            optionFilterProp: 'label',
            // 增加搜索框的提示文字
            placeholder: '请输入老师姓名搜索',
            // 添加选择变化事件处理器
            onChange: (value, option) => {
              console.log('选择的带班老师ID:', value);
              console.log('选择的带班老师完整数据:', option);
            }
            }
          },
            {
              field: 'selectedStudents',
              component: 'Select',
              label: '选择学生',
              required: true,
              componentProps: {
                mode: 'multiple', // 设置为多选模式
                request: async () => {
                  const result = await Api.manageStudent.studentFindAll(); // 获取学生列表的 API
                  console.log("获取学生列表的API返回的数据是", result);
                  // 处理并返回适当格式的数据
                  const data = result.items.map(student => ({
                      value: student.id, // 使用id作为选择值，而不是studentId
                      label: `${student.userName} (ID: ${student.id})` // 显示姓名和ID
                  }))
                  console.log("选择的学生数据是", data);
                  return data;
                },
                showSearch: true,
                // 使用函数定义筛选逻辑
                filterOption: (input, option) => {
                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                },
                // 指定过滤属性
                optionFilterProp: 'label',
                // 增加搜索框的提示文字
                placeholder: '请输入学生姓名搜索',
                // 添加选择变化事件处理器
                onChange: (selectedIds, options) => {
                  console.log('已选择的学生ID列表:', selectedIds);
                  if (selectedIds.length > 0) {
                    console.log('最新选择的学生ID:', selectedIds[selectedIds.length - 1]);
                  }
                  console.log('选择的学生选项详情:', options);
                }
            }
          },

          {
            field: 'startAt',
            component: 'DatePicker',
            label: '开始时间',
            colProps: {
              span: 12,
            },
            componentProps: {
              style: {
                width: '100%',
              },
              showTime: true,
            },
            rules: [{ required: true, type: 'object' }],
          },
          {
            field: 'expireAt',
            component: 'DatePicker',
            label: '结束时间',
            colProps: {
              span: 12,
            },
            componentProps: {
              style: {
                width: '100%',
              },
              showTime: true,
            },
            rules: [{ required: true, type: 'object' }],
          },
        ],
      },
    });

    // 设置表单的默认值
    formRef?.setFieldsValue({
      ...record,
      selectedStudents: selectedStudentIds, // 预选已有的学生
    });
  };

  // 删除确认
  const delRowConfirm = async (record: TableListItem) => {
    await Api.manageClass.classRemove({ id: record.id });
    dynamicTableInstance.reload();
  };

  // 管理班级学生
  const manageStudent = async (record: TableListItem) => {
    message.info('班级学生管理功能开发中');
  };

  /**
   * 班级状态标签
   */
  const getStatusTag = (status) => {
    switch (status) {
      case ClassStatus.DISABLED:
        return <Tag color="error">已停用</Tag>;
      case ClassStatus.ACTIVE:
        return <Tag color="success">活跃中</Tag>;
      case ClassStatus.GRADUATED:
        return <Tag color="default">已毕业</Tag>;
      default:
        return '';
    }
  };

  /**
   * 班级学级文本
   */
  const getClassGradeText = (grade) => {
    if (grade === 0) return '幼儿园';
    if (grade >= 1 && grade <= 6) return `小学${grade}年级`;
    if (grade >= 7 && grade <= 8) return `初中${grade - 6}年级`;
    return '未知';
  };

  const baseColumns: TableColumnItem[] = [
    {
    title: '班级信息',
    width: 150,
    dataIndex: 'className',
    customRender: ({ record }) => (
      <div>
        <a
          style="color: #1677ff; cursor: pointer; display: block;"
          onClick={() => {
            console.log('跳转到班级详情，班级ID:', record.classId);
            router.push({
              path: `/manage/class/${record.classId}`,
            });
          }}
        >
          {record.className}
        </a>
        <span style="font-size: 12px; color: #999;">{record.classId}</span>
      </div>
    ),
  },
  //这边是列表中加载的
  {
  title: '带班老师',
  width: 100,
  dataIndex: 'teacherName',
  hideInSearch: true,
  customRender:  async ({ record }) => {
    console.log("tablecolumn中的record是", record)
    // 如果直接有teacherName则显示
    // if (record.teacherName) {
    //   return record.teacherName;
    // }
    // //如果只有teacherId，可以通过映射表查找对应的名称
    // if (record.classTeacher) {
    //   // 这里可以添加一个函数来查找教师ID对应的名称
    //   const teacherName = await getTeacherNameById(record.classTeacher);
    //   record.teacherName = teacherName;
    //   console.log("column中的teacherName", teacherName)
    //   return teacherName || '未知教师';
    // }
    // return '未分配';
    },
  },
  {
    title: '学习进度',
    width: 120,
    dataIndex: 'progress',
    hideInSearch: true,
    customRender: ({ record }) => {
      // 将进度值（如"0%"）转换为数字
      const progressValue = parseInt(record.progress || '0%', 10);
      
      return (
        <a-progress 
          percent={progressValue} 
          size="small" 
          status={progressValue >= 100 ? 'success' : 'active'}
          strokeColor={progressValue < 30 ? '#faad14' : progressValue < 70 ? '#1677ff' : '#52c41a'}
        />
      );
    },
  },
    {
      title: '开班时间',
      width: 120,
      dataIndex: 'startAt',
      hideInSearch: true,
      customRender: ({ record }) => record.startAt ? new Date(record.startAt).toLocaleDateString() : '-',
    },
    {
      title: '结业时间',
      width: 120,
      dataIndex: 'expireAt',
      hideInSearch: true,
      customRender: ({ record }) => record.expireAt ? new Date(record.expireAt).toLocaleDateString() : '-',
    },
    {
      title: '学生人数',
      width: 100,
      dataIndex: 'studentCount',
      hideInSearch: true,
    },
  ];

  const columns: TableColumnItem[] = [
    ...baseColumns,
    {
      title: '操作',
      width: 200,
      dataIndex: 'ACTION',
      hideInSearch: true,
      fixed: 'right',
      actions: ({ record }: CustomRenderParams<TableListItem>) => [
        {
          label: '配置计划',
          auth: {
            perm: 'manage:class:read',
            effect: 'disable',
          },
          onClick: () => setPlan(record),
        },
        {
          label: '编辑',
          auth: {
            perm: 'manage:class:update',
            effect: 'disable',
          },
          onClick: () => openClassModal(record),
        },
      ],
    },
  ];

  // 添加打印API响应数据的函数
  const onTableDataLoaded = (data) => {
    console.log('班级列表API响应数据:', data);
  };

</script>

<style scoped lang="less"></style>
